
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://v3.bootcss.com/examples/dashboard/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="https://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../static/css/index.css" />
    <script src="../static/js/echarts.js"></script>
    <script src="../static/js/echarts-wordcloud.js"></script>
    <script src="../static/js/echarts-wordcloud.min.js"></script>
  </head>

  <body>
        <header>
        <div class="nav" style="position: absolute;right:25%;top: .1vw;
        width: 50%;
        height: 5vw;
        background: url(../static/image/111.png) no-repeat;
        background-size: 100%;
        text-align: center;
        line-height: 5vw;
        color: #0efcff;
        font-size: 1.6vw;
        letter-spacing: .6vw;">猎聘数据挖掘可视化分析系统</div>
        <div class="showTime">当前时间：2023年6月<span></span></div>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="/index">首页</a></li>
          </ul>
        </header>
        <section class="mainbox">
        <div class="column">
            <div class="panel bar"style="width: 340px;height:280px;">
                <h2 style=" position: absolute;right:25%;top: .1vw;width: 50%;
                height: 3vw;background: url(../static/image/111.png) no-repeat;
                background-size: 100%;text-align: center;line-height: 2.5vw;
                color: #0efcff;font-size: 1vw;letter-spacing: .1vw;">
                    柱状图-城市区岗位数
                </h2>
				<div id="main" style="width: 300px;height:200px;"></div>
                <script type="text/javascript">
				var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                    option = {
                    tooltip:{},
                    xAxis: {
                        type: 'category',
                        data: ['经理', '高级经理', '经理助理', '初级经理', '经理','(职位)']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: ['12', '13', '5', '6','5','8'],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }}] };
                    myChart.setOption(option);

                </script>

            </div>
        <div class="panel line"style="width: 340px;height:280px;">
                <h2 style=" position: absolute;right:22.5%;top: .1vw;width: 55%;
                height: 3vw;background: url(../static/image/111.png) no-repeat;
                background-size: 100%;text-align: center;line-height: 3vw;
                color: #0efcff;font-size: 1vw;letter-spacing: .1vw;">
                折线图-所需经验程度</h2>
				<div id="mainn" style="width: 320px;height:220px;"></div>
                <script type="text/javascript">
				var chartDom = document.getElementById('mainn');
                var myChart = echarts.init(chartDom);
                var option;
                    option = {
                    tooltip:{},
                    xAxis: {
                        type: 'category',
                        data: ['无需经验', '1-3年', '3-5年', '5-10年']
                        },
                    yAxis: {
                        type: 'value'
                    },
                    normal: {//是图形在默认状态下的样式
                                            label: {
                                                show: true,//是否显示标签
                                                textStyle: {
                                                    color: "black"
                                                }
                                            }
                                        },
                    series: [
                        {
                        data: [{value: 0.04, name: '无需经验'},
                                {value: 0.26, name: '1-3年'},
                                {value: 0.16, name: '3-5年'},
                                {value: 0.06, name: '5-10年'},
                                {value: 0.04, name: '2021'}],

                        type: 'line',
                        symbol: 'triangle',
                        symbolSize: 20,
                        lineStyle: {
                            color: '#5470C6',
                            width: 4,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#EE6666',
                            color: 'yellow'
                        }

                        }
                    ]
                    };
                    myChart.setOption(option);
                </script>

            </div>


        
          </ul>

        </div>
            <div class="column">
            <div class="panel bar"style="width: 640px;height:700px;position: absolute;right:28%">
                <h1 style=" position: absolute;right:25%;top: .1vw;width: 50%;
                height: 3vw;background: url(../static/image/111.png) no-repeat;
                background-size: 100%;text-align: center;line-height: 2.5vw;
                color: #0efcff;font-size: 1vw;letter-spacing: .1vw;">
                   {{ work }}--{{ area }}
                </h1>
				<div id="mainp" style="width: 200px;height:100px;">

                </div>
                    {{ map }}

            </div>
                <div class="column">
            <div class="panel bar"style="width: 380px;height:280px;position: absolute;right:0%">
            <h2 style=" position: absolute;right:25%;top: .1vw;
                width: 50%;
                height: 3vw;
                background: url(../static/image/111.png) no-repeat;
                background-size: 100%;
                text-align: center;
                line-height: 2.5vw;
                color: #0efcff;
                font-size: 1vw;
                letter-spacing: .1vw;">饼图-学历要求</h2>
				<div id="maine" style="width: 300px;height:50px;">

                </div>
                        {{ wo }}

            </div></div>

                <div class="panel line1"  style="width: 380px;height:280px;z-index: 0;position: absolute;right:0%;bottom: 0%;">
                <h2 style=" position: absolute;right:25%;top: .1vw;
                width: 50%;
                height: 3vw;
                background: url(../static/image/111.png) no-repeat;
                background-size: 100%;
                text-align: center;
                line-height: 2.5vw;
                color: #0efcff;
                font-size: 1vw;
                letter-spacing: .1vw;">词云图-产业分布关键词</h2>


                <div id="mainc" style="width: 360px;height: 350px;">
                        {{dd}}
                </div>

                </div>





              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://v3.bootcss.com/dist/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="https://v3.bootcss.com/assets/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>
